.loading-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  .loading-icon {
    height: 60px;
    width: 60px;
    background-image: url("../../assets/images/loading/pet1.png");
    background-size: 100%;
    background-repeat: no-repeat;
    animation: pet steps(1) 0.5s infinite;

    @keyframes pet {
      0% {
        background-image: url("../../assets/images/loading/pet1.png");
      }

      25% {
        background-image: url("../../assets/images/loading/pet2.png");
      }

      50% {
        background-image: url("../../assets/images/loading/pet3.png");
      }

      75% {
        background-image: url("../../assets/images/loading/pet4.png");
      }

      100% {
        background-image: url("../../assets/images/loading/pet1.png");
      }
    }
  }

  .loading-text {
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: bold;
    // color: white;

    --delay: 0;

    span {
      display: inline-block;
      // animation: .5s infinite alternate-reverse;
      animation-name: beat;
      animation-duration: 0.5s;
      animation-iteration-count: infinite;
      animation-direction: alternate-reverse;
      animation-delay: var(--delay);
    }

    @keyframes beat {
      0% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(-25%);
      }
    }
  }
}
